<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>留言板</title>
    <link rel="shortcut icon" href="img/notelogo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .endtag{
            border-radius: 13px;
            padding: 7px;
            text-align: center;
            margin-top: 10px;
        }
        .cont {
            overflow: auto;
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 登录模态框（Modal）开始 -->
    <div class="modal fade" id="loginModel" tabindex="-1" role="dialog" aria-labelledby="loginModelLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="loginModelLabel">登录</h4>
                </div>
                <div class="modal-body">
                    <form id="login" class="form-horizontal" role="form">
                        <div class="form-group" style="width:80%;margin:0 auto;">
                            <label for="id">用户名<span id="login-info"  class="label label-danger"></span></label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input id="id" class="form-control" placeholder="请输入用户名" type="text">
                            </div>
                        </div>

                        <div class="form-group" style="width:80%;margin:0 auto;">
                            <label for="password">密码</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input id="password" class="form-control" placeholder="请输入密码" type="password">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" onclick="login()" class="btn btn-primary">登录</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 登录模态框（Modal）结束 -->

    <!--头部导航栏开始-->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/exp6" >留言板</a>
            </div>

            <div class="navbar-header navbar-right">
                <a class="navbar-brand dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-list"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a id="uname" href="/exp6/">登录</a></li>
                    <li class="divider"></li>
                    <li><a href="/exp6/Logout">退出</a></li>
                </ul>
            </div>

            <div class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input id="searchword" type="text" onkeydown="if(event.keyCode==13){searchByKeyWord();}" class="form-control" placeholder="搜留言">
                </div>
                <button type="button" onclick="searchByKeyWord()" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
            </div>
        </div>
    </nav>
    <!--头部导航栏结束-->
    <!--输入框开始-->
    <h5>说点什么吧</h5>
    <div style="margin: 20px 10px 50px 10px;">
        <form role="form">
            <div class="form-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <input id="addMessageTitle" type="text" class="form-control" name="title" placeholder="标题">
                    </div>
                    <div class="panel-body">
                        <textarea id="addMessageContent" class="form-control" rows="5" placeholder="内容"></textarea>
                    </div>
                </div>
                <input id="btnaddMessage" type="button" onclick="addMessage()" class="btn btn-danger pull-right" value="发表">
            </div>
        </form>
    </div>
    <br/><hr/>
    <!--输入框结束-->
    <!--留言展示区开始-->
    <div id="showNote">
        <img style="display:block;margin:0 auto" id="loadinggif" src="img/loading.gif" />
    </div>
    <!--留言展示区结束-->
    <div class="endtag">
        <button class="btn-sm btn-success" onclick="loadingMore()" title="点击加载更多">加载更多</button>
    </div>

    <div class="well well-sm text-center" style="margin:10px auto 0 auto">
        <img src="https://v2.jinrishici.com/one.svg?font-size=20&spacing=2&color=blue">
        <hr>
        <p>Design by zhienchen</p>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/note.js"></script>
</body>
</html>
